<template>
  <view class="index-container">
    <navbar bgColor="transparent" showLogo :showBack="false" :placeholder="false"/>
    <view class="body">
      <view class="swipper-box" :style="{height: `calc(100vh - ${tabbarHeight})`}">
        <swiper class="swiper" :current="current" circular @change="onChange" @animationfinish="animationfinish">
          <swiper-item class="item" v-for="(item, index) in list" :key="index">
            <c-image :src="item.image" loadingIcon="icon" mode="aspectFill"/>
          </swiper-item>
        </swiper>
      </view>
      <view class="video" :style="{top: navHeight}" v-if="videoUrl && !touching">
        <video :src="videoUrl"
               object-fit="cover"
               autoplay
               loop
               show-mute-btn
               :show-center-play-btn="false"
               @error="videoErrorCallback"
        />
        <!--<image :src="item.image" mode="aspectFill" v-show="current!= index"/>-->
      </view>
      <view class="text-box">
        <!--<view class="goods-name">{{item.name}}</view>
        <view class="fz-32">{{item.desc}}</view>
        <view class="more">
          <view class="arrow"><text class="iconfont icon-youjiantou"/></view>
          <view>DISCOVER MORE</view>
        </view>-->
        <view class="lines">
          <view class="line" :class="{active: current == index}" v-for="(item, index) in list"/>
        </view>
      </view>
    </view>
    <tabbar/>
  </view>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
import {getCarouselList} from '@/api/home'
import {wxTokenLogin} from "@/api/login";
export default {
  data() {
    return {
      current: 0,
      touching: false,
      list: []
    };
  },
  computed: {
    ...mapGetters(['token']),
    videoUrl() {
      let item = this.list[this.current]
      return item ? item.videoUrl : ''
    }
  },
  methods: {
    ...mapActions(['setToken']),
    init() {
      const func = () => {
        getCarouselList({pageNum: 1, pageSize: 10}).then(res => {
          this.list = res.records.map(item => {
            return {
              image: item.imageUrl,
              videoUrl: item.videoUrl,
            }
          })
        })
      }
      uni.login({
        success: ({code}) => {
          wxTokenLogin({code: code}).then(res => {
            this.setToken(res.result)
            func()
          })
        }
      })
    },
    animationfinish() {
      this.touching = false
    },
    onChange(e) {
      this.current = e.detail.current
      this.touching = true
    },
    changeTab(e) {
      this.current = e.index
    },
    videoErrorCallback(e) {
    }
  },
  beforeCreate() {
    uni.hideTabBar()
  },
  onLoad() {
    this.init()
  },

}
</script>

<style lang="scss">
@import "@/static/styles/minix.scss";

.index-container {
  /deep/ .uni-video-container {
    background-color: transparent;
  }

  .swipper-box {
    height: 100%;

    .swiper {
      height: 100%;
      background-color: rgba(0, 0, 0, .5);

      image {
        width: 100%;
        height: 100%;
        filter: brightness(0.6);
      }

      .item {
        position: relative;
      }
    }
  }
  .video {
    position: fixed;
    width: 100%;
    z-index: 99;
    height: 450rpx;

    video {
      width: 100%;
      height: 100%;
    }
  }
  .text-box {
    position: absolute;
    bottom: 18%;
    margin: 0 auto;
    color: #fff;
    line-height: 58rpx;

    .goods-name {
      font-size: 40rpx;
    }

    .more {
      display: flex;
      align-items: center;
      color: #efbb76;
      font-size: 34rpx;
      margin: 48rpx 0 84rpx;

      .arrow {
        border: 1rpx solid #fff;
        width: 80rpx;
        height: 80rpx;
        border-radius: 100%;
        @include flex-center;
        font-size: 40rpx;
        margin-right: 20rpx;
        color: #fff;
      }
    }

    .lines {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100vw;

      .line {
        width: 10rpx;
        height: 10rpx;
        background: #bbbbbb;
        margin-right: 16rpx;
        border-radius: 10rpx;
        &:last-child {
          margin-right: 0;
        }
        &.active {
          background: #fff;
        }
      }
    }
  }
}
</style>
